<template>
	<page-header-wrapper>
		<div
			style="margin-bottom: 10px;margin-top: -10px;display: flex;flex-direction: row;justify-content: space-between;align-items: center;">
			<a-button @click='returnBack'>返回</a-button>
			<a-button type="dashed" primary>{{getpaystatus(info.prescription.paystatus)}}</a-button>
		</div>
		<a-card :bordered="false" v-if="info!=''">

			<a-descriptions bordered title="药房信息" size=' small'>
				<a-descriptions-item label="名称">{{info.prescription.pharmacyname}}</a-descriptions-item>
				<a-descriptions-item label="地址">{{info.prescription.pharmacyarea}}</a-descriptions-item>
			</a-descriptions>

			<a-descriptions bordered title="患者信息" size=' small' style='margin-top:40px'>
				<a-descriptions-item label="姓名">{{info.prescription.name}}</a-descriptions-item>
				<a-descriptions-item label="性别">{{info.user.sex=='1'?'男':'女'}}</a-descriptions-item>
				<a-descriptions-item label="年龄">{{info.prescription.age}}岁</a-descriptions-item>
				<a-descriptions-item label="地址">{{info.user.province}}{{info.user.city}}{{info.user.county}}
				</a-descriptions-item>
				<a-descriptions-item label="身高(单位：cm)">{{info.user.height}}</a-descriptions-item>
				<a-descriptions-item label="体重(单位：kg)">{{info.user.weight}}</a-descriptions-item>
				<a-descriptions-item :span='3' label="既往病史">
					<div class="columnbox">
						<div>{{bingshi.span}}</div>
						<div>
							<img style="width:100px;height:100px;margin-right:20px" @click='previewImg(item)'
								v-for="(item,index) in bingshi.img" :key='index' :src='item' />
						</div>
					</div>
				</a-descriptions-item>
				<a-descriptions-item :span='3' label="过敏史">
					<div class="columnbox">
						<div>{{guomin.span}}</div>
						<div>
							<img style="width:100px;height:100px;margin-right:20px" @click='previewImg(item)'
								v-for="(item,index) in guomin.img" :key='index' :src='item' />
						</div>
					</div>
				</a-descriptions-item>
			</a-descriptions>

			<a-descriptions bordered title="医生信息" size='small' style='margin-top:40px'>
				<a-descriptions-item label="医生">{{info.doctor.name}}</a-descriptions-item>
				<a-descriptions-item label="职称">{{info.doctor.zhicheng}}</a-descriptions-item>
				<a-descriptions-item label="机构">{{info.doctor.jigou}}</a-descriptions-item>
				<a-descriptions-item label="科室">{{info.doctor.keshi}}</a-descriptions-item>
				<a-descriptions-item label="联系电话">{{info.doctor.phone}}</a-descriptions-item>
			</a-descriptions>

			<a-descriptions style='margin-top: 40px;' bordered title="开方信息" size='small'>
				<a-descriptions-item label="辨病">{{info.prescription.bianbing}}</a-descriptions-item>
				<a-descriptions-item label="辩症">{{info.prescription.bianzheng}}</a-descriptions-item>
				<a-descriptions-item label="剂型">{{info.prescription.jixing}}</a-descriptions-item>
				<a-descriptions-item label="医嘱提醒">{{info.prescription.title}}</a-descriptions-item>
				<template v-if="info.prescription.typ==1">
					<a-descriptions-item label="用法">
						{{info.prescription.state==1?'内服':'外用'}}；
						共{{info.prescription.ji}}剂；
						共服{{info.prescription.day}}日；
						每日分{{info.prescription.ci}}次服用
					</a-descriptions-item>
				</template>
				<template v-else>
					<a-descriptions-item label="用法">
						{{info.prescription.state==1?'内服':'外用'}}；
						共{{info.prescription.ji}}剂；
						每日{{info.prescription.day}}剂；
						1剂分{{info.prescription.ci}}次服用
					</a-descriptions-item>
				</template>
				<a-descriptions-item label="是否复诊">{{info.prescription.fuzhen==1?'复诊':'不复诊'}}</a-descriptions-item>
				<a-descriptions-item label="复诊日期" v-if='info.prescription.fuzhen==1'>
					{{info.prescription.fuzhendate==0?'-': new Date(info.prescription.fuzhendate * 1000).toLocaleString() }}
				</a-descriptions-item>
				<a-descriptions-item label="配送方式">{{info.prescription.ziti==1?'快递':'自提'}}</a-descriptions-item>
				<a-descriptions-item label="诊金">¥{{info.prescription.zhenjin}}</a-descriptions-item>
				<a-descriptions-item label="总价">¥{{info.prescription.price}}</a-descriptions-item>
			</a-descriptions>

			<a-descriptions bordered v-if="info.prescription.ziti==1" title="配送地址" size='small'
				style='margin-top: 40px;'>
				<a-descriptions-item :span='3' label="配送地址">
					<span style="margin-right: 10px;">{{info.address.name}}</span>
					<span style="margin-right: 10px;">{{info.address.phone}}</span>
					{{info.address.province}}
					{{info.address.city}}
					{{info.address.county}}
					{{info.address.area}}
				</a-descriptions-item>
			</a-descriptions>

			<a-descriptions bordered v-if="info.prescription.ziti==1" title="物流信息" size='small'
				style='margin-top: 40px;'>
				<a-descriptions-item :span='3' label="配送地址">
					<a-button type="primary" @click='saveYaofang'>查看物流</a-button>
				</a-descriptions-item>
			</a-descriptions>

			<a-descriptions style='margin-top: 40px;' bordered title="药方" size='small'>
			</a-descriptions>
			<a-table :pagination="pagination" :scroll="{ x: true }" ref="table" bordered
				:dataSource="info.prescriptiondrug" :columns="columns" :rowKey="(record,index)=> index">
				<!--          <img @click="previewImg(record.qianming)" class="banner-img" slot-scope="span, record" :src="span"
         slot="qianming" /> -->
				<div slot="price" slot-scope="span, record">
					¥{{span}}
				</div>
			</a-table>
			<a-descriptions style='margin-top: 40px;' bordered title="处方信息" size='small'>
			</a-descriptions>
			<div class="wdh-100" style="margin-top: 20px;">
				<a-button @click='saveYaofang'>保存图片</a-button>
			</div>
			<img style="margin-top: 10px;width:400px" :src="yaofangUrl" />
			<div class="cf-box " ref="canvasImg" style="position: fixed;left: -2000px;">
				<div class="columnbox info-box">
					<div class="i-title wdh-100" style="text-align: center;margin-bottom: 20px;transform: scale(1.2);">
						广州标邦云互联网医院
					</div>
					<div class="wdh-100 bz-box">
						处方单号：{{info.prescription.orderno}}
					</div>
					<div class="i-title" style="margin-top: 20px;">·辩证·</div>
					<div class="wdh-100 bz-box rowbox">
						<div style="width: 40%;">姓名：{{info.prescription.name}} </div>
						<div style="width: 60%;">性别：{{info.prescription.sex=='2'?'女':'男'}}</div>
					</div>
					<div class="wdh-100 bz-box rowbox">
						<div style="width: 40%;">年龄：{{info.prescription.age}}岁 </div>
						<div style="width: 60%;">日期：
							{{ new Date(info.prescription.addtime * 1000).toLocaleString() }}
						</div>
					</div>
					<div class="wdh-100 bz-box">
						诊断：{{info.prescription.bianbing}}
					</div>
				</div>
				<div class="columnbox info-box" style="position: relative;">
					<div class="i-title">·开方·</div>
					<div class="wdh-100 bz-box jixing-box">
						{{info.prescription.jixing}}
					</div>
					<div class="wdh-100 bz-box">
						Rp：
					</div>
					<div class="wdh-100 bz-box jixing-box">
						<div class="wdh-100 prescriptiondrug-list">
							<div style="margin-right: 20px;" v-for="(item,index) in info.prescriptiondrug" :key='index'>
								{{item.chinesedrug}} * {{item.gram}}g
							</div>
						</div>
						<div class="wdh-100 bz-box  yl-box">
							【用量】共 <span>{{info.prescription.ji}}</span> 剂，
							共服 <span>{{info.prescription.day}}</span> 日，
							每日分<span>{{info.prescription.ci}}</span> 次服用，
						</div>
					</div>
				</div>
				<div class="columnbox info-box" style="position: relative;">
					<div class="wdh-100 bz-box  yl-box">
						医师：<img style="width: 150px;" :src="imgUrl" />
					</div>
				</div>
				<img class="seal-img" src="@/assets/icons/seal.jpg" />
			</div>
		</a-card>
		<imgBox ref='preimg'></imgBox>
	</page-header-wrapper>
</template>

<script>
	import html2canvas from 'html2canvas';
	import {
		zhongyaoOrderDetail,
		kuaidiList
	} from '@/api/orderManage'
	import imgBox from '@/components/previewImg/index'
	export default {
		components: {
			imgBox
		},
		data() {
			return {
				imgUrl: '',
				yaofangUrl: '',
				bingshi: {
					span: '',
					img: []
				},
				guomin: {
					span: '',
					img: []
				},
				id: 0,
				info: '',
				pagination: {
					current: 1, //默认当前叶数
					total: 0, // 数据总数 如果不设置就以绑定的数据量为准
					pageSize: 10, // 默认每页条数
					showSizeChanger: true, //是否可以改变 pageSize
					pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
					showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
					hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
				},
				columns: [{
						title: '名称',
						dataIndex: 'chinesedrug',
						key: 'chinesedrug',
					},
					{
						title: '重量（g）',
						dataIndex: 'gram',
						key: 'gram',
					},
					{
						title: '价格（元）',
						dataIndex: 'price',
						key: 'price',
					}
				]
			}
		},
		created() {
			this.id = this.$route.query.id * 1
			this.getDetail()
			this.getKuaidi()
		},
		methods: {
			getKuaidi() {
				kuaidiList({
					orderid: this.id,
					state: 2
				}).then(res => {

				})
			},
			getBase64() { // 将图片转为base64格式
				let that = this
				window.URL = window.URL || window.webkitURL;
				var xhr = new XMLHttpRequest();
				// xhr.open("get", that.info.prescription.qianming.replace(/http/g, 'https'), true);
				xhr.open("get", that.info.prescription.qianming, true);
				// 至关重要
				xhr.responseType = "blob";
				xhr.onload = function() {
					if (this.status == 200) {
						//得到一个blob对象
						var blob = this.response;
						console.log("blob", blob)
						// 至关重要
						let oFileReader = new FileReader();
						oFileReader.onloadend = function(e) {
							// 此处拿到的已经是 base64的图片了
							let base64 = e.target.result;
							that.imgUrl = base64
							setTimeout(() => {
								that.createImage()
							}, 1000)
							// 将图片的src属性赋值
							// console.log(imgD,'imgDimgDimgD');
						};
						oFileReader.readAsDataURL(blob);
					}
				}
				xhr.send();
			},
			saveYaofang() {
				var currentTime = new Date();
				var y = currentTime.getFullYear()
				var m = currentTime.getMonth() + 1
				let d = currentTime.getDate()

				const blob = this.base64ToBlob(this.yaofangUrl)
				const url = URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = this.info.prescription.name + '-' + y + '-' + m + '-' + d
				document.body.appendChild(link)
				link.click()

				// 清理
				document.body.removeChild(link)
				URL.revokeObjectURL(url)
			},

			base64ToBlob(dataurl) {
				var arr = dataurl.split(',')
				var mime = arr[0].match(/:(.*?);/)[1]
				var bstr = atob(arr[1])
				var n = bstr.length
				var u8arr = new Uint8Array(n)
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n)
				}
				return new Blob([u8arr], {
					type: mime
				})
			},

			createImage() {
				const element = this.$refs.canvasImg; // 获取需要生成图片的DOM元素
				html2canvas(element).then((canvas) => {
					this.yaofangUrl = canvas.toDataURL('image/png');
				})
			},
			previewImg(img) {
				this.$refs.preimg.initData(img)
			},
			getpaystatus(v) {
				switch (v) {
					case 0:
						return '全部'
						break;
					case -1:
						return '已撤回'
						break;
					case 1:
						return '待付款'
						break;
					case 2:
						return '已付款'
						break;
					case 3:
						return '待收货'
						break;
					default:
						return '已完成'
						break
				}
			},
			returnBack() {
				this.$router.go(-1)
			},
			getDetail() {
				zhongyaoOrderDetail({
					id: this.id
				}).then(res => {
					this.info = res.data
					let bingshi = JSON.parse(res.data.user.bingshi)
					this.bingshi = {
						span: bingshi.span,
						img: bingshi.img == '' ? [] : bingshi.img.split(',')
					}
					let guomin = JSON.parse(res.data.user.guomin)
					this.guomin = {
						span: guomin.span,
						img: guomin.img == '' ? [] : guomin.img.split(',')
					}
					this.pagination.total = res.data.prescriptiondrug.length
					this.getBase64()

				})
			}
		}
	}
</script>

<style scoped>
	.cf-box {
		color: #000;
		border: #e5e7ed solid 1px;
		margin-top: 10px;
		position: relative;
		width: 400px;
	}

	.info-box {
		background: #fff;
		padding: 40px 20px;
		width: 100%;
		border-bottom: #e5e7ed solid 1px;
	}

	.i-title {
		font-weight: bold;
	}

	.bz-box {
		margin-top: 20px;
	}

	.jixing-box {
		/* padding-bottom: 20px; */
	}

	.prescriptiondrug-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		line-height: 50px;
	}

	.prescriptiondrug-list view {
		margin-right: 32px;
	}

	.yl-box span {
		color: #f17267;
		margin: 0 10px;
	}

	.seal-img {
		width: 120px;
		height: 120px;
		position: absolute;
		bottom: 40px;
		z-index: 2;
		right: 40px
	}

	.rowbox {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
</style>